<template>

<!--备注修改弹窗-->
<!--  v-model="dialogFormVisible"-->

  <el-dialog
      v-model="dialogFormVisible"
      title="修改备注"
      width="500"
      align-center
  >
    <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="remarkInfo"
        :rules="dialogFormRules"
        label-width="auto"
    >
      <el-form-item label="修改备注" prop="remarkInfo">
        <el-input v-model="remarkInfo.value" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="edit()">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>


<!-- ------------------------------------------------------------------------------------------ -->

    <el-form
    style="max-width: 600px"
    :model="marketActivity"
    label-width="auto"
    class="demo-ruleForm"
    status-icon
  >
    <el-form-item label="ID">
      <el-input v-model="marketActivity.id" disabled/>
    </el-form-item>

    <el-form-item label="活动所属人">
      <el-input v-model="marketActivity.ownerName" disabled/>
    </el-form-item>

    <el-form-item label="活动名称">
      <el-input v-model="marketActivity.name" disabled/>
    </el-form-item>

    <el-form-item label="活动开始时间">
      <el-input :model-value="marketActivity.startDate" disabled/>
    </el-form-item>

    <el-form-item label="活动结束时间">
      <el-input :model-value="marketActivity.endDate" disabled/>
    </el-form-item>

    <el-form-item label="活动预算">
      <el-input :model-value="marketActivity.cost" disabled/>
    </el-form-item>

    <el-form-item label="活动描述">
      <el-input :model-value="marketActivity.description" type="textarea" disabled/>
    </el-form-item>

    <el-form-item label="活动创建时间">
      <el-input v-model="marketActivity.createTime" disabled/>
    </el-form-item>

    <el-form-item label="活动创建人">
      <el-input v-model="marketActivity.createName" disabled/>
    </el-form-item>

    <el-form-item label="活动编辑时间">
      <el-input v-model="marketActivity.editTime" disabled/>
    </el-form-item>

    <el-form-item label="活动编辑人">
      <el-input v-model="marketActivity.editName" disabled/>
    </el-form-item>

    <el-form-item label="填写备注" prop="note_content" >
      <el-input type="textarea" v-model="activityRemark.noteContent" placeholder="请输入备注内容"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" size="large"  @click="submitRemark">提交备注</el-button>
      <el-button type="success" size="large"  @click="goBack">点击返回</el-button>
    </el-form-item>
  </el-form>

  <!--备注历史列表-->
  <el-table :data="activityRemarkList" height="250" style="width: 100%">
    <el-table-column type="index" label="序号" width="80"/>
    <el-table-column property="noteContent" label="备注内容" />
    <el-table-column property="createTime" label="备注时间" />
    <el-table-column property="createByName" label="备注人" />
    <el-table-column property="editTime" label="编辑时间" />
    <el-table-column property="editByName" label="编辑人" />
    <el-table-column label="操作">
      <!--使用插槽获取用户信息-->
      <template #default="scope">
        <el-button type="primary" circle @click="edit(scope.row.id)">改</el-button>
        <el-button type="danger" circle @click="del(scope.row.id)">删</el-button>
      </template>

    </el-table-column>
    <el-button @click="edit(1)"></el-button>
    <el-pagination
        class="page"
        :page-size=pageSize
        :hide-on-single-page=true
        :total=total
        @current-change="page"
        @prev-click="page"
        @next-click="page"
        layout="prev, pager, next"
    />
  </el-table>
  <el-button @click="edit(1)"></el-button>

</template>


<script >

import {doGet, doPost} from "@/http/httpRequest";
import {goBack, messageTip} from "@/util/utils";

  export default {
    name:"MarketActivityDetailView.vue",
    data(){
      return{
        marketActivity :{},
        activityRemark:{},
        currentInput : '',
        activityRemarkList:[],
        pageSize : 0,
        total:0,
        dialogFormVisible:false,
        remarkInfo:'',
        dialogFormRules:{
          remarkInfo:[
            {required:true, message: "请输入", trigger:'blur'}
          ]
        },

      }
    },
    inject:["reload"],
    methods: {
      page(number) {
        this.getRemark(this.$route.params.id, number)
      },
      /**
       * 加载活动详情
       */
      loadActivity(activityId) {
        doGet("api/activityDetails/" + activityId, {}).then(res => {
          if (res.data.code === 200) {
            this.marketActivity = res.data.data;
          }
        })
      },

      goBack,
      /**
       * 输入备注检查
       * @returns {boolean}
       */
      submitRemarkCheck() {
        if (this.activityRemark.noteContent === ''|| this.activityRemark.noteContent === undefined) {
          return true;
        }
      },
      /**
       * 提交备注
       */
      submitRemark() {
        //console.log(this.activityRemark.noteContent);
        if (this.submitRemarkCheck()) {

          //不合法的提交
          messageTip("请输入有效内容", "warning")
          return;
        }
        this.activityRemark.activityId = this.marketActivity.id;
        console.log(this.activityRemark)
        //添加数据
        doPost("api/addRemark", this.activityRemark).then(res => {
          if (res.data.code === 200) {
            messageTip("添加成功", "success")
            this.reload();
          } else {
            messageTip("添加失败", "error")
          }
        });
      },
      getRemark(marketId,current) {
        console.log("发送了")
        doGet("api/getMarketRemark", {
          marketId : marketId,
          current : current
        }).then(res => {
          if (res.data.code === 200) {
            //集合
            this.activityRemarkList = res.data.data.list;
            this.total = res.data.data.total;
            this.pageSize = res.data.data.pageSize;
          }
        })
      },
      //修改备注内容
      edit(remarkId) {
        this.dialogFormVisible = true;
        console.log(remarkId)
        //获取要修改的备注回填
      },
      test(){
        console.log(this.$refs.ruleFormRef.validate())
      }
    },
    mounted() {
      this.loadActivity(this.$route.params.id)
      //获取备注列表
      this.getRemark(this.$route.params.id, 1);
    },
  }
</script>


<style scoped>
.page{
  display: flex;
  justify-content: center;
}
</style>